{extend name="common/dialog" /}
{block name="head"}
<link rel="stylesheet" href="__STATIC__/common/css/jquery-ui.css" media="all">
<script type="text/javascript" src="__STATIC__/common/js/jquery-ui.js"></script>
<style type="text/css">
    @media screen and (min-width: 768px){
      .layui-container {
          width: 95%;
      }
    }

</style>
{/block}
{block name="main"}
<div class="layui-container" style="padding: 0;">
  <div class="view-content" style="margin:35px 0;">
   <div class="layui-row" style="position: relative;">
        <div class="layui-col-xs6" style="padding-right: 45px;">
          <div class="grid-demo grid-demo-bg1" >
             <div class="view-content-border">
               <div class="layui-row">
                <div class="layui-col-xs2">
                  <?php if($row['type'] == 3):?>
                  <i class="icon icon-onedrive netword-icon" ></i>
                  <?php else:?>
                  <i class="icon icon-earth netword-icon"></i>
                  <?php endif?>
                  
                </div>
                <div class="layui-col-xs10">
                  <div class="network-local">{$row['locallabel']}</div>
                  <div class="network-address">{$row['locatlabeladdress']} </div>
                </div>
               </div>
             </div>
          </div>
          
        </div>
        <div class="layui-col-xs6" style="padding-left: 45px;">
          <div class="view-content-border">
            <div class="layui-row">
                <div class="layui-col-xs2">
                 <?php if($row['endtype'] == 3):?>
                  <i class="icon icon-onedrive netword-icon" ></i>
                  <?php else:?>
                  <i class="icon icon-earth netword-icon"></i>
                  <?php endif?>
                </div>
                <div class="layui-col-xs10">
                  <div class="network-local">{$row['endclou']}</div>
                  <div class="network-address">{$row['endlabeladdress']}</div>
                </div>
               </div>
          </div>
           
        </div>
        </div>
        <span class="lricon-ler" style="top:35px">
        </span>
      </div>
  <div class="view-tab">
    <form action="{:U('update')}" class="layui-form nerwork-like" id="_form">
      <input name="network_id" value="{$row['id']}" type="hidden" />
      <input name="total" value="0" type="hidden" total/>
      <div class="layui-col-xs6" style="padding-right: 25px;">
        <br/>
        <br/>
        <div class="layui-form-item">
            <label class="layui-form-label" >{:lang('Bandwidth')}</label>
            <div class="layui-input-6">
                <div class="form-value broadbandinput" >
                <label class="broadband-label">
                      
                      <input type="text"  class="layui-input" id="_broadband" value="{$row['broadband']}" name="mbs"  lay-verify="required" data-title="{:lang('Please enter broadband values')}"  placeholder="0" >
                      <span class="autobtn autobtn2"></span>
                      <span class="_add"></span>
                      <span class="_min"></span>
                  </label> 
                
              </div>
            </div>
        </div>
        
          
      </div>
    
    <div style="position: fixed;bottom:15px;right: 20px;font-size: 16px;">
      <p style="color: #777;">
        <b ><span >{$row['broadband']} </span>Mbps</b>&nbsp;&nbsp;&nbsp;<b style="" >{:lang('Configuration Cost:')} {$row['total']} / {:lang('Month')}</b>
       <button type="button" id="submit-btn" class="layui-btn" lay-submit="" lay-filter="submit">{:lang('Finish')}</button></p>

       <p style="margin-top:10px;display: none;" id="_update_ends"><span style="position: relative;color: #fff;">
        <span id="_mbps_view" >{$row['broadband']} </span>Mbps
          <b style="position: absolute;left: 48%;top:-18px;color: #fff;">⇓</b>
       </span>&nbsp;&nbsp;&nbsp;&nbsp;<b style="color: #f00;" id="total-label">{:lang('Configuration Cost:')} <span  id="total-label2">{$row['total']} / {:lang('Month')}</span></b>
       </p>
</form>
</div>
</div>
  </div>
      
</div>
{/block}
{block name="footer"}
  <script>

  layui.use(['form', 'layer','laydate'], function () {
      var form = layui.form, layer = layui.layer,$= layui.jquery,laydate = layui.laydate;
      var isSubmit = false;
      form.on('submit(submit)', function (data) {
          if($("#submit-btn").hasClass('layui-btn-disabled')){
            return false;
          }
          if(isSubmit){
              return false;
          }
          isSubmit = true;
          loading = layer.load(1,{shade:[0.1,'#fff']});
          // 提交到方法 默认为本身
          $.post($("#_form").attr('action'), data.field, function (res) {
            isSubmit = false;
              layer.close(loading);
              if (res.code  > 0) {
                  layer.msg(res.msg, {time: 1800, icon: 1}, function () {
                      top.location.href = res.url;
                  });
              } else {
                  layer.msg(res.msg, {time: 1800, icon: 2});
              }
          });
      });
      $("#_broadband").blur(function(){
        var _this = $(this);
          var value = parseInt($(this).val());
            _this.attr('readonly',true);
            if(value < 0 || isNaN(value)){
              value=1;
            }else if(value > 2000){
               value = 2000
            }else if(value > 10 && value <= 2000){
               value = Math.round(value/10)*10
            }
            if($("#submit-btn").hasClass('layui-btn-disabled')){
              return false;
            }
            $("#submit-btn").addClass('layui-btn-disabled');
            $(this).val(value)
            $("#_mbps_view").html(value)
            $("#_update_ends").show()
            $("#total-label").html("{:lang('The cost is being calculated....')}");
            $("#submit-btn").addClass('layui-btn-disabled')
            _alculator({
                url:"{:U('query',['network_id'=>$row['id'],'auto'=>1])}",
                data:$("#_form").serializeArray(),
                notice:"{:lang('The cost is being calculated....')}"
            },function(res){
               _this.attr('readonly',false);
               $("#submit-btn").removeClass('layui-btn-disabled')
                if(res.code == 1){
                    $("#total-label").html(res.msg);

                }else{
                    $("#total-label").html("{:lang('Configuration Cost:')}"+res.msg);
                }
            })
        })
  })
  
  </script>
{/block}